@php
    $user_id = Auth::user()->id;
@endphp
@extends('layouts.default')

@section('title', '班级荣誉')

@push('scripts')
<script src="{{ asset('lib/xm-select-v1.2.4/xm-select.js')}}"></script>
<script>
    layui.use(['layer','form','table','laytpl','laydate','element','laypage','upload'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var upload = layui.upload;
        var xmDemo;
        var id = "{{request()->get('id',0)}}";
        var files = []; //上传的文件数组

        laydate.render({
            elem: '#begin_date',
            type: 'date'
        });


        renderSelect(function(){
            //编辑
            if(id != 0){
                getAwardsFirst({'id':id},function(res){
                    if(res.code == 1){
                        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                            'data_version_id': res.data.data_version_id,
                            'name': res.data.name,
                            'begin_date': res.data.begin_date,
                            'end_date': res.data.end_date,
                            'grade': res.data.grade_array[0].optionId,
                            'class_item': res.data.class_item_set[0].optionId,
                            'level': res.data.level_array.length>0?res.data.level_array[0].optionId:'',
                            'award_from': res.data.award_from,
                            'id': res.data.id,
                            'form_instance_id': res.data.form_instance_id,
                            'award_recipient': res.data.award_recipient,
                            'customer_grade': res.data.customer_grade,
                        });
                        // if(res.data.category_array.length>0 && res.data.category_array[0].optionId == 150){
                        //     $('.award_recipient').show();
                        // }
                        if(res.data.grade_array.length>0 && res.data.grade_array[0].selectValue == '其他'){
                            $('.zdydj').show();
                        }
                        //参与教师
                        //xmDemo.setValue(res.data.participants);
                        //上传文件
                        if(res.data.proof_material_array.length){
                            layui.each(res.data.proof_material_array, function(i, d) {
                                files.push(d.file_origin);
                                $('input[name=files]').val(JSON.stringify(files));
                                $('#test3').parent().find('.file-show').html('');
                                for(i in files) {
                                    if(files[i]) {
                                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                                        $('#test3').parent().find('.file-show').append(fsHtml);
                                    }
                                }
                            });
                        }
                    }
                })
            }else{
                //xmDemo.setValue(['{{$user_id}}']);
            }
        });

        //下拉框初始化
        async function renderSelect(callback){
             //获取字典下拉框数据
            await new Promise((resolve) => {
                getDictionaryItem({'diccode': ['level','award_grade','grade', 'class']}, function (res){
                    if(res.code === 1) {
                        let data = res.data;
                        for(var k in data) {
                            let key = k.toLowerCase();
                            if(k == 'hdjb'){
                                $('[data-role='+key+'List]').empty().append('<option value="">请选择</option>');
                            }else{
                                $('[data-role='+key+'List]').empty().append('<option value="">请选择</option>');
                            }
                            let d = data[k];
                            for (var i in d) {
                                $('[data-role='+key+'List]').append('<option value="' + d[i].optionId + '">' + d[i].selectValue + '</option>');
                            }
                        }
                        form.render();
                        return resolve();
                    }
                });
            });

             //获取学期
            await new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('select[name=data_version_id]').empty();
                        $('select[name=data_version_id]').append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('select[name=data_version_id]').append('<option value="'+res.data[i].id+'">'+res.data[i].title+'</option>');
                        }
                        form.render();
                        return resolve();
                    }
                })
            })

            //参与人
            /**
            await new Promise((resolve) => {
                getParticipantsData({},function(res){
                    if(res.code == 1){
                        xmDemo = xmSelect.render({
                                    el: '#demo1',
                                    autoRow: true,
                                    filterable: true,
                                    tree: {
                                        show: true,
                                        showFolderIcon: true,
                                        showLine: true,
                                        indent: 20,
                                        expandedKeys:false
                                    },
                                    direction: 'down',
                                    filterable: true,
                                    height: 'auto',
                                    name:'participant',
                                    layVerify: 'required',
                                    layVerType: 'msg',
                                    layReqText:'参与教师不能为空',
                                    theme: {
                                        color: '#2d8cf0',
                                    },
                                    searchTips:'关键字搜索',
                                    data: function(){
                                        return res.data
                                    }
                                })
                                return resolve();
                    }
                })
            })
            **/

            callback();
        }

        upload.render({
            elem: '#test3'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,choose: function(obj){
                //上传loading
                showloading(true);
            }
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                showloading(false);
                if(obj.total == obj.successful) {
                    layer.msg('上传成功');
                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                if(res.code != 1) {
                    layer.msg(res.msg);
                    return false;
                }else{
                    layer.msg('上传成功');
                }
                files.push(res.data);
                $('input[name=files]').val(JSON.stringify(files));
                $('#test3').parent().find('.file-show').html('');
                for(i in files) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#test3').parent().find('.file-show').append(fsHtml);
                    }
                }
            }
        });

        //删除文件
        window.fileDelete = function (fk, ft) {
            if(ft == 1) {
                delete files[fk];
                $('input[name=files]').val(JSON.stringify(files));
                $('#test3').parent().find('.file-show').html('');
                for(i in files) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#test3').parent().find('.file-show').append(fsHtml);
                    }
                }
            }
        }

        //提交
        form.on('submit(formDemo)', function(data){
            //data.field.participant = xmDemo.getValue('nameStr');
            //data.field.participant_id = xmDemo.getValue('value');
            data.field.status = 1;
            /**
            if(data.field.files.length == 0){
                layer.msg('请填写证明材料', {icon: 5,shift : 6});return false;
            }**/
            data.field.activity_category = 'TEACHER_HONOR_TABLE';
            addHonor(data.field,function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
           })
            return false;
        });

        //保存
        $('#formSave').click(function(){
            var isValid = form.validate('.data_version_id');
            if(!isValid){
                return false;
            }
            var data = form.val("formTest");
            data.participant = xmDemo.getValue('nameStr');
            data.participant_id = xmDemo.getValue('value');
            data.status = 0;
            data.activity_category = 'TEACHER_HONOR_TABLE';
            addHonor(data,function(res){
                if(res.code == '1'){
                    layer.msg(res.msg,{icon: 6,time: 1000},function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
           })
            return false;
        })

        form.on('select(grade)', function(data){
            let qt = $(this).text();
            if(qt == '其他'){
                $('.zdydj').show();
            }else{
                $('.zdydj').hide();
            }
        });

        // form.on('select(award_typeList)', function(data){
        //     console.log(data);
        //     if(data.value == 150){
        //         $('.award_recipient').show();
        //     }else{
        //         $('.award_recipient').hide();
        //     }
        // });

    });
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 20px;}
    .panel-title h3{font-weight: 800;margin-bottom: 20px;}

    #add-form{padding: 20px 5px;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button{margin-left: 10px;}
    /**.layuik-inline .layuik-input-inline{width: 100% !important;}**/
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <div class="panel-title">
            <h3>班级荣誉 - @if(!empty($_GET['id']))编辑@else新增@endif</h3>
        </div>
        <form class="layui-form" action=""  lay-filter="formTest">
            <div class="layui-row">
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>学年学期：</label>
                        <div class="layuik-input-inline">
                            <select class="data_version_id" name="data_version_id" lay-filter="termList" data-role="termList" lay-verify="required" lay-reqText="学年学期不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>奖项名称：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入" lay-reqText="奖项名称不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>

                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>颁奖日期：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="begin_date" id="begin_date" required lay-verify="required" placeholder="请输入" lay-reqText="开始日期不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>年级班级：</label>
                        <div class="layuik-input-inline" style="width:40%!important;">
                            <select name="grade" lay-filter="gradeList" data-role="gradeList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                        <div class="layuik-input-inline" style="width: 40%!important;">
                            <select  name="class_item" lay-filter="classList" data-role="classList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">奖项名次：</label>
                        <div class="layuik-input-inline">
                            <select lay-filter="customer_grade" name="customer_grade" lay-filter="award_gradeList" data-role="award_gradeList"  lay-reqText="等级不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>级别：</label>
                        <div class="layuik-input-inline">
                            <select name="level" lay-filter="levelList" data-role="levelList" lay-verify="required" lay-reqText="级别不能为空"></select>
                        </div>
                    </div>
                </div>
                <!-- <div class="layuik-form-item award_recipient" style="display:none;">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">指导对象：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="award_recipient"  placeholder="请输入教师/学生"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>  -->



                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">证明材料：</label>
                        <div class="layuik-input-inline layuik-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="test3"><i class="layui-icon"></i>上传文件</button>
                        <div class="file-show"></div>
                        <input style="display:none" type="text" name="files"  value="">
                        </div>

                    </div>
                </div>

                <input type="hidden" name="id" value="" >
                <input type="hidden" name="form_instance_id" value="" >
            </div>

            <div class="layui-row">
                <div class="opt-area">
                    <a href="javascript:history.go(-1);" ><button class="layui-btn layui-btn-primary" type="button">返回</button></a>
                    <button class="layui-btn layui-btn-primary" type="button"  id="formSave" style="color:#2d8cf0;" >保存</button>
                    <button class="layui-btn layui-btn-normal"  lay-submit lay-filter="formDemo">提交</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection
